<template>
  <basicTopContainer v-loading="loading">
    <el-button slot="button" type="primary" size="small" @click="addForm">新增组织</el-button>
    <basic-container>
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        :page="page"
        v-model="form"
        ref="crud"
        @on-load="onLoad"
      >
        <template slot="menu" slot-scope="{size, type, row}">
          <el-button :type="type" :size="size" @click="rowDel(row)">删除</el-button>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog title="新增承租组织" append-to-body :visible.sync="dialogVisible">
      <el-form :model="dialogForm" :rules="rules" label-width="140px">
        <el-form-item label="承租组织名称" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入承租组织名称"></el-input>
        </el-form-item>
        <el-form-item label="承租组织简称" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入承租组织简称"></el-input>
        </el-form-item>
        <el-form-item label="所属行业" prop="name">
          <el-select v-model="dialogForm.name" placeholder="请选择所属行业"></el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="name">
          <el-row :gutter="10">
            <el-col :span="7">
              <el-select v-model="dialogForm.name" placeholder="省"></el-select>
            </el-col>
            <el-col :span="7">
              <el-select v-model="dialogForm.name" placeholder="市"></el-select>
            </el-col>
            <el-col :span="7">
              <el-select v-model="dialogForm.name" placeholder="县"></el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="详细地址" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入详细地址"></el-input>
        </el-form-item>
        <el-form-item label="管理员姓名" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入管理员姓名"></el-input>
        </el-form-item>
        <el-form-item label="登陆手机号" prop="name">
          <el-input v-model="dialogForm.name" placeholder="请输入登录手机号"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </basicTopContainer>
</template>

<script>
import { getList, getDetail, add, update, remove } from "@/api/meter/tenant";
export default {
  data() {
    return {
      form: {},
      dialogForm: {
        name: "",
      },
      loading: false,
      dialogVisible: false,
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        selection: true,
        dialogClickModal: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        column: [
          {
            label: "",
            prop: "search",
            hide: true,
            search: true,
            searchLabelWidth: 1,
            searchPlaceholder: "请输入公司名",
            rules: [
              {
                required: true,
                message: "请输入公司名",
                trigger: "blur",
              },
            ],
          },
          {
            label: "组织名",
            prop: "company",
            rules: [
              {
                required: true,
                message: "请输入组织名",
                trigger: "blur",
              },
            ],
          },
          {
            label: "管理员",
            prop: "customerName",
            rules: [
              {
                required: true,
                message: "请输入组织名",
                trigger: "blur",
              },
            ],
          },
          {
            label: "手机号",
            prop: "mobile",
            rules: [
              {
                required: true,
                message: "请输入组织名",
                trigger: "blur",
              },
            ],
          },
          {
            label: "是否在租",
            prop: "isInRent",
            type: "select",
            dicData: [
              {
                label: "未租",
                value: 0,
              },
              {
                label: "在租",
                value: 1,
              },
            ],
            rules: [
              {
                required: true,
                message: "请输入组织名",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入缓存主键",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    addForm() {
      this.dialogVisible = true;
    },
    add() {
      add(this.dialogForm).then((res) => {
        console.log("dialogForm", res);
        this.dialogVisible = false;
        this.dialogForm = {
          name: "",
        };
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
  },
};
</script>

<style>
</style>
